<script setup>
import {FileMapping, User} from '@/utils/resource'
import {showSaveResponse, validFieldExists, validateForm} from '@/utils/element-helper'
import {nextTick, reactive, ref} from "vue";
import util from "@utils/util";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const router = useRouter();

const props = defineProps({
  id: {
    type: String,
    default: "new"
  },
  parent: {
    type: String,
    default: ""
  },
  parentName: {
    type: String,
    default: ""
  },
})
const loading = ref(false);
const form = ref(null);
const id = props.id;
const parent = props.parent;
const parentName = props.parentName;
const isNew = id === undefined || id === "new"

const state = reactive({
  params: {},
  initForm: {},// for edit
  form: {
    key: "",
    ext: "folder",
    size: 0,
    name: "",
    folder: 1,
    parent: 0,
    ancestors: "0",
  },
  rules: {
    name: [
      {required: true, message: '名称不能为空', trigger: 'blur'},
    ],
    key: [
      {required: true, message: '编码不能为空', trigger: 'blur'},
      {
        validator, trigger: 'blur'
      }
    ],
  },
})

if (!isNew) {
  //编辑
  loadFileMapping();
} else {
  //新建根目录的
  if (!parent) {
  } else {
    //新建非根目录的
    state.form.parent = parent
  }
}

function validator(rule, value, callback) {
  validFieldExists(rule, value, callback, state.initForm[rule.field] !== value || isNew, (rule, value) => FileMapping.exists(rule, value))
}

async function loadFileMapping() {
  loading.value = true
  let res = await FileMapping.get(id)
  state.form = util.copy(res.data)
  state.initForm = res.data
  await nextTick();
  loading.value = false
}

function submitForm(formName) {
  return validateForm(form.value, formName, () => {
    showSaveResponse(loading.value, () => FileMapping.save(state.form, isNew ? 'post' : 'put'), (res) => router.back())
  })
}


function previewImg() {
  window.open(state.form.url)
}
</script>

<template>
  <div>
    <div style="padding-left: 20px">
      <p style="font-size: 20px">/{{ parentName }}</p>
      <el-form :model="state.form" label-position="left" :rules="state.rules" ref="form" label-width="140px"
               v-loading="loading"
               class="fileMapping-form">
        <el-form-item label="文件id" prop="name" class="my-form-item" v-if="state.form.folder!==1">
          {{state.form.id}}
        </el-form-item>
        <el-form-item label="文件夹名称" prop="name" class="my-form-item">
          <el-input v-model="state.form.name" :disabled="state.form.folder!==1"></el-input>
        </el-form-item>
        <el-form-item label="文件夹编码" prop="key" class="my-form-item">
          <el-input v-model="state.form.key" :disabled="state.form.folder!==1"></el-input>
        </el-form-item>
        <el-form-item label="照片" class="my-form-item" v-if="state.form.folder!==1">
            <el-image v-if="state.form.url" :src="state.form.url" style="width: 200px" @click="previewImg"/>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div style="padding: 15px">
    <router-link to="/fileMapping">
      <el-button plain round type="info" icon="Back" style="margin-right: 10px;">返回</el-button>
    </router-link>
    <el-button plain type="primary" icon="CircleCheck" @click="submitForm('form')" v-if="state.form.folder===1">保存</el-button>
  </div>
</template>

<style scoped>
.fileMapping-form {
  width: 90%;
}

.my-form-item {
  max-width: 700px;
}

.my-form-input {
  max-width: 330px;
}
</style>
